<template>
  <div class="vivid-col" :class="[`vivid-col-${span}`]" :style="style">
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ViCol',
  props: {
    span: {
      type: Number,
      default: 24
    },
    offset: {
      type: Number,
      default: 0
    },
  },
  computed: {
    gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.name !== 'ViRow') {
        parent = parent.$parent;
      }
      // 安全访问：使用可选链 + 类型断言 + 空值合并
      return (parent as unknown as { gutter?: number })?.gutter ?? 0;
    },
    style() {
      const style = {
        paddingLeft: '0',
        paddingRight: '0',
      };
      if (this.gutter) {
        style.paddingLeft = this.gutter / 2 + 'px';
        style.paddingRight = style.paddingLeft;
      }
      return style;
    }
  }
}
</script>

<style lang="scss" scoped>
@use 'sass:math';

.vivid-col {
  float: left;
  box-sizing: border-box;
}


@for $i from 1 through 24 {
  .vivid-col-#{$i} {
    width: math.percentage(calc($i / 24));
  }
}
</style>
